<template>
<div class="informationSize">
      <div class="hr"></div>
          <div class="write">
            <span class="write_tip">填写信息</span>
                <ul class="write_detail">
                  <li>
                    <span class="write_people">收件人</span><label v-show="errorShow.nameError">（请填写收件人信息）</label>
                    <input type="text"  name="name" class="name" placeholder="请选择姓名" v-model="somedata.name" @keyup='chuan($event)' @focus="ffoucs" @blur="bblur"/>
                    <img src="http://file.zoomyoung.cn/web/img/error.png" v-show="errorShow.nameError"/>
                  </li>
                  <li>
                    <span class="write_tel">电话</span><label v-show="errorShow.telError">（请填写电话信息）</label>
                    <input type="tel"  name="tel" class="tel" placeholder="请选择电话号码" v-model="somedata.tel" @keyup='chuan($event)' @focus="ffoucs" @blur="bblur"/>
                    <img src="http://file.zoomyoung.cn/web/img/error.png" v-show="errorShow.telError"/>
                  </li>
                  <li>
                    <span class="write_area">收货地址</span><label v-show="errorShow.areaError">（请填写收获地址信息）</label>
                     <input type="text" placeholder="请选择城市"  id="location" name="location" v-model="somedata.location" @click='visible = !visible' @focus="ffoucs" @blur="bblur">
                      <CityPicker @on-finish="handleFinish" v-model="visible" :defaultData='defaultData'></CityPicker>
                     <img src="http://file.zoomyoung.cn/web/img/error.png" v-show="errorShow.areaError"/>
                  </li>
                  <li class="areaLi">
                     <span class="write_area">详细地址</span>
                     <textarea class="area" v-model="somedata.area" @keyup='chuan($event)' @focus="ffoucs" @blur="bblur"></textarea>
                  </li>
                </ul>
          </div> 
</div>
</template>
<script>
import CityPicker from 'vue-citypicker';
export default {
  name: 'informationxx',
  data () {
    return {
      somedata:{
      name:'',
      tel:'',
      location:'',
      area:''
      },
       visible: false,
       defaultData: [],
       priceShow:""
    }
  }, 
  mounted(){
    var _this=this;
    this.$http.get('http://zoomyoung.cn/api/auth/get-userinfo',{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){  
          _this.somedata.name = res.data.data.useraddress.consignee;
          _this.somedata.tel = res.data.data.useraddress.mobilephone;
          _this.somedata.location = res.data.data.useraddress.province+" "+res.data.data.useraddress.city+" "+res.data.data.useraddress.area;
          _this.somedata.area = res.data.data.useraddress.add_detail;
        _this.$store.dispatch('setInformation',_this.somedata)    //这里是判断填写的信息是否齐全
      }).catch(function(err){  
         console.log(err)  
      }) 
  },
  methods:{
    ffoucs(){
      this.priceShow=false;
      this.$store.dispatch('setPriceShow',this.priceShow)
    },
    bblur(){
      this.priceShow=true;
      this.$store.dispatch('setPriceShow',this.priceShow)
    },
    chuan(ev){
      var _this=this;
      _this.$store.dispatch('setInformation',_this.somedata)    //这里是判断填写的信息是否齐全
      _this.errorShow.nameError=false;
      _this.errorShow.areaError=false;
      _this.errorShow.telError=false;
      for(var i in _this.$store.state.information)   //这里是为了判断用户有没有把信息框上的数据
      {
        if(_this.$store.state.information[i]==="")
        {
          switch(i)
          {
          case 'name' :_this.errorShow.nameError=true;break;
          case 'tel' :_this.errorShow.telError=true ;break;
          case 'area' :_this.errorShow.areaError=true ;break;
          }
        }

      };
      _this.$store.dispatch("setErrorShow",_this.errorShow);
      console.log(ev)
    },
    handleFinish(data){
         this.somedata.location=data.province.name+" "+data.city.name+" "+data.area.name;
    },
  },
  components: {
    CityPicker,
  },
  computed:{
    errorShow(){
      return this.$store.state.errorShow
    }
  }
}
</script>
<style scoped>
 .hr{width: 86.6%;margin-left:6.7%;height: 3px;background:14248;margin-top: 10px}
 .write{width: 86.6%;margin-left:6.7%;margin-top:2%;height: auto;}
 .write_tip{width: 40%;height:50px;font-family: PingFangSC-Medium;font-size: 36px;color: #FFFFFF;letter-spacing: -0.04px;display: block;margin-top: 10%;line-height: 50px}
 .write_detail{width: 100%;}
 .write_detail li{width: 100%;position: relative;}
 .write_people,.write_tel,.write_area{width: 20.2%;height: 40px;font-family: PingFangSC-Regular;font-size:28px;color: #B5B5B5;letter-spacing: -0.04px;display: block;margin-top:5%;float: left;}
  .write_detail label{display: block;float: left;margin-top:5%;  font-family: PingFangSC-Regular;font-size: 24px;color: #FA3C55;letter-spacing: -0.03px;height: 40px;line-height: 40px;display:-none;}
  .write_detail li img{height: 40px;position: absolute;right: 2%;bottom: 25px;display:- none;}
  .write_detail li.error label{display: block;}
  .write_detail li.error img{display: block;}
  .write_detail li.error input{border: 2px solid #FF3D55;}
  .write_detail input{width: 95%;height: 80px;background: #313237;border-radius: 8px;display: block;padding-left: 5%;font-size:30px;position: relative;}
  .area{width: 95%;height: 300px;background: #313237;border-radius: 8px;display: block;padding-left: 5%;font-size:30px;position: relative;}
  input,textarea{border: 2px solid #414248;color:white;}
  .write_detail .area{width:95%;margin-top:15px;height:160px;line-height: 50px;background: #313237;border-radius: 8px;color: white;font-size:36px;padding-left: 5%;}
  .write_detail li.areaLi  img{height: 40px;position: absolute;right: 2%;bottom:50px;display:- none;}
</style>
